<template>
  <div>

    <!-- 父组件中点击编辑打开弹出层 -->
    <!-- 子组件中, 点击x关闭弹出层 -->
    <button @click="isShow = true">编辑</button>
    <HmPopup v-model="isShow">
      <h1>123</h1>
    </HmPopup>

    <HmPopup v-model="isShow">
      <h1>123</h1>
    </HmPopup>


  </div>
</template>

<script>
import HmPopup from './components/HmPopup.vue';
export default {
  // 0. 注册组件
  // 1. 定义一个布尔值, 用来控制弹出层的显示和隐藏
  // 2. v-model=""  :value  @input绑定布尔值
  // 3. 子组件通过props接收value 收到布尔值
  // 4. 子组件使用value控制v-if显示和隐藏
  // 5. 子组件通过$emit触发一个input事件, 传出来一个false
  data() {
    return {
      isShow: false
    }
  },
  components: {
    HmPopup
  }
}
</script>

<style scoped></style>